<template>
  <div class="data">
    <template v-if="form.taskStatus && form.taskStatus == 1">
      <div class="poster">
        <img :src="form.url" alt="" />
      </div>
      <div class="save-btn-info">
        <van-button round block size="normal" type="info" @click="submit">分享给客户</van-button>
      </div>
    </template>
    <template v-else>
      <div class="bg"></div>
      <div class="tip">
        <img style="width: 337px; height: 393px;" src="../../assets/tip_bg.png" alt="" />
        <div class="button" @click="back">我知道了</div>
      </div>
    </template>
    <Loading :isLoad="loading" />
  </div>
</template>

<script>
  import Loading from '@/components/Loading.vue'
  import { getDetail } from '@/api/shortLink'
  export default {
    name: 'short-link-push',
    data() {
      return {
        loading: false,
        userIds: [],
        form: {}
      }
    },
    components: {
      Loading
    },
    methods: {
      submit() {
        wx.invoke(
          'shareToExternalContact',
          {
            attachments: [
              {
                msgtype: 'image', // 消息类型，必填
                image: {
                  mediaid: '', // 图片的素材id
                  imgUrl: this.form.url // 图片的imgUrl,跟图片mediaid填其中一个即可
                }
              }
            ]
          },
          (res) => {
            if (res.err_msg == 'shareToExternalContact:ok') {
              setTimeout(() => {
                this.back()
              }, 1000)
            }
          }
        )
      },
      getDetail() {
        if (this.$route.query.id) {
          this.loading = true
          getDetail(this.$route.query.id).then((res) => {
            this.form = res.data ? res.data : {}
            this.loading = false
          })
        }
      },
      back() {
        document.addEventListener(
          'WeixinJSBridgeReady',
          function () {
            WeixinJSBridge.call('closeWindow')
          },
          false
        )
        WeixinJSBridge.call('closeWindow')
      }
    },
    created() {
      this.getDetail()
    }
  }
</script>

<style lang="less" scoped>
  /deep/ .van-button--info {
    color: #fff;
    background-color: #07c160;
    border: 1px solid #07c160;
  }
  .save-btn-info {
    position: absolute;
    bottom: 50px;
    left: 50%;
    width: 90%;
    transform: translateX(-50%);
    .van-button {
      height: 40px;
      line-height: 40px;
      color: #fff;
    }
  }
  .page {
    background: none;
  }
  .bg {
    background: #1d2129;
    height: 100%;
    width: 100%;
    position: absolute;
  }
  .data {
    width: 100%;
    height: 100%;
    // padding: 20px;
    .poster {
      text-align: center;
      height: 70%;
      padding: 20px 40px 0 40px;
    }
    .tip {
      position: absolute;
      width: 337px;
      height: 393px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .button {
        position: absolute;
        border-radius: 16px 16px 16px 16px;
        bottom: 54px;
        left: 50%;
        transform: translateX(-50%);
        width: 226px;
        height: 56px;
        background: linear-gradient(270deg, #07c160 0%, #90de45 99%);
        box-shadow: 0px 16px 16px 0px rgba(123, 229, 24, 0.302);
        line-height: 56px;
        text-align: center;
        font-size: 21px;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #ffffff;
      }
    }
  }
</style>
